<template>
  <div>
    <div v-show="!loading">
      <van-nav-bar
        title="支付详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
      <van-popup
        v-model="show"
        round
        position="bottom"
        style="
          height: 100px;
          line-height: 100px;
          text-align: center;
          font-size: 0.5rem;
        "
        >请先添加地址信息</van-popup
      >
      <div
        style="margin-top: 1.5rem"
        v-show="this.$store.state.select_address.length !== 0"
      >
        <div class="aa">
          <span style="font-size: 15px; font-weight: 800">姓名:</span>
          {{ this.$store.state.select_address.name }}
        </div>
        <div class="aa">
          <span style="font-size: 15px; font-weight: 800">电话:</span
          >{{ this.$store.state.select_address.tel }}
        </div>
        <div class="aa">
          <span style="font-size: 15px; font-weight: 800">地址:</span>
          {{ this.$store.state.select_address.address }}
        </div>
      </div>
      <div
        v-show="this.$store.state.select_address.length == 0"
        style="margin: 1.8rem 1rem 0.5rem 3.5rem"
      >
        <van-button type="danger" @click="toaddressEdit">添加新地址</van-button>
      </div>
      <hr />
      <van-card
        :num="pay_all.pay_selectedNum"
        :price="pay_all.pay_price"
        :desc="pay_all.pay_info"
        class="goods-card"
        :thumb="pay_all.pay_imgUrl"
      />
      <van-submit-bar
        :price="price"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>

    <div v-show="loading" style="margin-top: 2rem">
      <van-nav-bar
        title="支付详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
      <van-loading type="spinner" size="100px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      show: false,
      pay_all: this.$store.state.pay_all,
    };
  },
  computed: {
    price() {
      return (
        Number(this.pay_all.pay_price) *
        Number(this.pay_all.pay_selectedNum) *
        100
      );
    },
    order_delected_index() {
      this.$store.state.order_delected_index;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    // 提交
    onSubmit() {
      if (this.$store.state.select_address.length == 0) {
        this.show = true;
      } else {
        setTimeout(() => {
          this.$router.push("/success");
        }, 1000);
        this.loading = true;
        let buy_order = {
          num: this.pay_all.pay_selectedNum,
          price:
            Number(this.pay_all.pay_price) *
            Number(this.pay_all.pay_selectedNum),
          desc: this.pay_all.pay_info,
          thumb: this.pay_all.pay_imgUrl,
        };
        this.$store.commit("muChangebuyed_order", buy_order);
        this.$store.commit("muOrder_deleted", this.order_delected_index);
      }
    },
    toaddressEdit() {
      this.$router.push("/addressList");
    },
  },
  created() {
    // console.log(this.$store.state.select_address);;
  },
};
</script>

<style>
.aa {
  margin: 0.5rem;
  font-size: 0.4rem;
}
</style>